<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <script>
        // 在此处直接编写js代码,则表示页面加载前即执行该代码
        // alert("Hello World");

        // 如果希望触发后执行,可以定义js的函数,相当于java中的方法
        // 语法:function 函数名(参数列表){函数体}
        function sayHello(){
            alert("Hello World");
        }
    </script>
    <script type="text/javascript" src="test.js"></script>
    <!-- 错误示例一:对于script标签,不能省略结束标签,使用自结束 -->
    <!--    <script type="text/javascript" src="test.js"/>-->
    <!-- 错误示例二:在引入外部js文件的script标签体中,不允许编写js代码 -->
<!--    <script type="text/javascript" src="test.js">-->
<!--        function f1(){-->
<!--            alert("Hello World");-->
<!--        }-->
<!--    </script>-->
</head>
<body>
<!--
    引入方式一:简短缩写方式
    在每一个HTML元素中都有很多事件句柄的属性
    每一个事件句柄都对应一个元素的属性
    此处以单击按钮事件为例,其属性为onclick
    语法:事件句柄="javascript:xxxx;"
    其中javascript:可以省略
-->
<button onclick="javascript:alert('这是一个简短缩写方式')">简短缩写方式</button><br>
<!--
    方式二:内联方式
    在当前文档的任意位置(一般在head子标签中)定义一个script标签
    在script标签体中编写js函数
    在事件句柄的属性值中可以调用对应的js函数
-->
<button onclick="sayHello()">内联方式</button><br>
<!--
    方式三:外部引入
    在外部定义一个*.js的文件,在*.js文件中编写js代码
    在当前页面中通过script标签的src属性引入进来
-->
<button onclick="fn()">外部引入</button><br>
<button onclick="f1()">测试</button>
</body>
</html>